<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>调试页面</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode" style="position: relative;">
  </canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2.js"></script>
<script>
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

const chart = new F2.Chart({
  id: 'mountNode',
  pixelRatio: window.devicePixelRatio // 指定分辨率
});

chart.source(data);
chart.interval().position('genre*sold').color('genre');
chart.render();
</script>
</body>
</html>
